<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <!--走马灯区域-->
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="(item,index) in imgList" :key="index">
        <!--        <h3 class="medium">{{ item }}</h3>-->
        <el-image :src="item.imgUrl"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!--主体容器-->
    <div class="musicBody">
      <!--第一行-->
      <el-row :gutter="20" style="margin-top: 20px">
        <!--精选歌单-->
        <el-col :span="16">
          <div>
            <div>
              <span class="musicBodyTitle">
                <span class="musicBodyTitle2">精选</span>歌单
              </span>
              <el-link :underline="false" class="moreText" @click="$router.push('/musicSheetV2')">更多</el-link>
            </div>
            <!--内容-->
            <div class="box">
              <!--一个大的-->
              <el-link :underline="false" v-show="true" @click="toMusicSheetDetail(musicList[0].id)">
              <div style="margin-right: 10px;float: left;background-size: 100% 100%" class="box-1"
                   :style="{backgroundImage:'url('+musicList[0].imgUrl+')'}">
                <p class="boxTip">
                  <span><i class="el-icon-headset"></i></span>
                  <span v-text="musicList[0].playCount">123.4W</span>
                </p>
                <div class="boxTitle">
                  <span style="font-size: 20px;" v-text="musicList[0].specialName">123123</span><br>
                  <span style="color: #99a9bf" v-text="musicList[0].userName">123</span>
                </div>
              </div>
              </el-link>
              <!--四个小的-->
              <div style="float: right;" class="box-1">
                <el-link :underline="false" v-show="true" @click="toMusicSheetDetail(musicList[1].id)">
                <div class="smallBox" style="float: right;background-size: 100% 100%"
                     :style="{backgroundImage:'url('+musicList[1].imgUrl+')'}">
                  <p class="boxTip">
                    <span><i class="el-icon-headset"></i></span>
                    <span v-text="musicList[1].playCount">123.4W</span>
                  </p>
                  <div class="boxTitleSmall">
                    <span style="font-size: 16px;" v-text="musicList[1].specialName">123123</span><br>
                    <span style="color: #99a9bf" v-text="musicList[1].userName">123</span>
                  </div>
                </div>
                </el-link>
                <el-link :underline="false" v-show="true" @click="toMusicSheetDetail(musicList[2].id)">
                <div class="smallBox" :style="{backgroundImage:'url('+musicList[2].imgUrl+')'}"
                     style="background-size: 100% 100%">
                  <p class="boxTip">
                    <span><i class="el-icon-headset"></i></span>
                    <span v-text="musicList[2].playCount">123.4W</span>
                  </p>
                  <div class="boxTitleSmall">
                    <span style="font-size: 16px;" v-text="musicList[2].specialName">123123</span><br>
                    <span style="color: #99a9bf" v-text="musicList[2].userName">123</span>
                  </div>
                </div>
                </el-link>
                <el-link :underline="false" v-show="true" @click="toMusicSheetDetail(musicList[3].id)">
                <div class="smallBox" style="float: right;background-size: 100% 100%"
                     :style="{backgroundImage:'url('+musicList[3].imgUrl+')'}">
                  <p class="boxTip">
                    <span><i class="el-icon-headset"></i></span>
                    <span v-text="musicList[3].playCount">123.4W</span>
                  </p>
                  <div class="boxTitleSmall">
                    <span style="font-size: 16px;" v-text="musicList[3].specialName">123123</span><br>
                    <span style="color: #99a9bf" v-text="musicList[3].userName">123</span>
                  </div>
                </div>
                </el-link>
                <el-link :underline="false" v-show="true" @click="toMusicSheetDetail(musicList[4].id)">
                <div class="smallBox" :style="{backgroundImage:'url('+musicList[4].imgUrl+')'}"
                     style="background-size: 100% 100%">
                  <p class="boxTip">
                    <span><i class="el-icon-headset"></i></span>
                    <span v-text="musicList[4].playCount">123.4W</span>
                  </p>
                  <div class="boxTitleSmall">
                    <span style="font-size: 16px;" v-text="musicList[4].specialName">123123</span><br>
                    <span style="color: #99a9bf" v-text="musicList[4].userName">123</span>
                  </div>
                </div>
                </el-link>
              </div>
            </div>
          </div>
        </el-col>
        <!--热门榜单-->
        <el-col :span="8">
          <div>
            <div>
              <span class="musicBodyTitle">
                <span class="musicBodyTitle2">热门</span>歌曲
              </span>
              <el-link  :underline="false" class="moreText" @click="$router.push('/musicListV2')">更多</el-link>
            </div>
            <!--内容-->
            <div class="box">
              <ul>
                <li class="musicLi" v-for="(item,index) in hotMusicList" :key="index">
                  <span :style="`float:left;font-weight:bold;color:${index+1<=3?'#fe2c62':''}`">{{index+1}}</span>
                  <div :title="item.audioName"
                       style="float:left;width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                    <el-link style="color: #333333;margin-left: 5px" v-text="item.audioName" :underline="false" @click="hotMusicToPlayMusic(item.hash,item.albumId)"></el-link>
                  </div>
                  <div style="margin-right: 0;float: right;color: #999999" v-text="item.timeLength">播放时长</div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row :gutter="20" style="margin-top: 20px">
        <!--新歌首发-->
        <el-col :span="16">
          <div>
            <div>
              <span class="musicBodyTitle">
                <span class="musicBodyTitle2">新歌</span>首发
              </span>
              <el-link :underline="false" disabled class="moreText">更多</el-link>
            </div>
            <!--内容-->
            <div class="box">
              <el-tabs v-model="activeName" :stretch="true">
                <el-tab-pane label="华语" name="first" v-loading="chinaMusicLoading" style="height: 358px;">
                  <ul>
                    <li class="musicLi" v-for="(item,index) in chinaNewMusic.slice(chinaPage,chinaPage+10)"
                        :key="index">
                      <span :style="`float:left;font-weight:bold;color:${item.sortNum<=3?'#fe2c62':''}`">{{item.sortNum}}</span>
                      <div
                        :title="item.fileName"
                        style="float:left;width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        <el-link style="color: #333333;margin-left: 5px" v-text="item.fileName" :underline="false" @click="chinaMusicToPlayMusic(item.hash,item.albumId)"></el-link>
                      </div>
                      <div style="margin-right: 0;float: right;color: #999999" v-text="item.timeLength">播放时长</div>
                    </li>
                  </ul>
                  <el-pagination small layout="prev, slot, next"
                                 :total="chinaNewMusic.length"
                                 style="text-align: center"
                                 @next-click="chargePage(1,1)"
                                 @prev-click="chargePage(1,2)">
                    <span
                      style="color: #1fc0ff">{{chinaPageNum}}</span><span>/</span><span>{{Math.ceil(chinaNewMusic.length/10)}}</span>
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="欧美" name="second" v-loading="eaMusicLoading" style="height: 358px;">
                  <ul>
                    <li class="musicLi" v-for="(item,index) in eaNewMusic.slice(eaPage,eaPage+10)" :key="index">
                      <span :style="`float:left;font-weight:bold;color:${item.sortNum<=3?'#fe2c62':''}`">{{item.sortNum}}</span>
                      <div
                        :title="item.fileName"
                        style="float:left;width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        <el-link style="color: #333333;margin-left: 5px" v-text="item.fileName" :underline="false" @click="eaMusicToPlayMusic(item.hash,item.albumId)"></el-link>
                      </div>
                      <div style="margin-right: 0;float: right;color: #999999" v-text="item.timeLength">播放时长</div>
                    </li>
                  </ul>
                  <el-pagination small layout="prev, slot, next"
                                 :total="eaNewMusic.length"
                                 style="text-align: center"
                                 @next-click="chargePage(2,1)"
                                 @prev-click="chargePage(2,2)">
                    <span
                      style="color: #1fc0ff">{{eaPageNum}}</span><span>/</span><span>{{Math.ceil(eaNewMusic.length/10)}}</span>
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="日韩" name="third" v-loading="jkMusicLoading" style="height: 358px;">
                  <ul>
                    <li class="musicLi" v-for="(item,index) in jkNewMusic.slice(jkPage,jkPage+10)" :key="index">
                      <span :style="`float:left;font-weight:bold;color:${item.sortNum<=3?'#fe2c62':''}`">{{item.sortNum}}</span>
                      <div
                        :title="item.fileName"
                        style="float:left;width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        <el-link style="color: #333333;margin-left: 5px" v-text="item.fileName" :underline="false" @click="jkMusicToPlayMusic(item.hash,item.albumId)"></el-link>
                      </div>
                      <div style="margin-right: 0;float: right;color: #999999" v-text="item.timeLength">播放时长</div>
                    </li>
                  </ul>
                  <el-pagination small layout="prev, slot, next"
                                 :total="jkNewMusic.length"
                                 style="text-align: center"
                                 @next-click="chargePage(3,1)"
                                 @prev-click="chargePage(3,2)">
                    <span
                      style="color: #1fc0ff">{{jkPageNum}}</span><span>/</span><span>{{Math.ceil(jkNewMusic.length/10)}}</span>
                  </el-pagination>
                </el-tab-pane>
              </el-tabs>
            </div>

          </div>
        </el-col>
        <!--热门歌手-->
        <el-col :span="8">
          <div>
            <div>
              <span class="musicBodyTitle">
                <span class="musicBodyTitle2">热门</span>歌手
              </span>
              <el-link :underline="false" class="moreText" @click="$router.push('/singer')">更多</el-link>
            </div>
            <!--内容-->
            <div class="box">
              <el-tabs v-model="activeName1" :stretch="true">
                <el-tab-pane label="热门" name="first" style="height: 358px;">
                  <el-link :underline="false" v-show="true">
                    <div class="singImgBig" :style="{backgroundImage:'url('+item.imgUrl+')'}" v-if="index===hotSingerPage"
                         v-for="(item,index) in hotSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                    <div class="singImgBig" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                         v-if="index===hotSingerPage+1" v-for="(item,index) in hotSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                    <div class="singImgSmall" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                         v-if="index===hotSingerPage+2" v-for="(item,index) in hotSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                    <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                         v-if="index===hotSingerPage+3" v-for="(item,index) in hotSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                    <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                         v-if="index===hotSingerPage+4" v-for="(item,index) in hotSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-pagination small layout="prev, slot, next"
                                 class="pageClass"
                                 :page-size="5"
                                 :total="hotSinger.length"
                                 style="text-align: center"
                                 @next-click="chargeSingerPage(1,1)"
                                 @prev-click="chargeSingerPage(1,2)">
                    <span
                      style="color: #1fc0ff">{{hotSingerPageNum}}</span><span>/</span><span>{{Math.ceil(hotSinger.length/5)}}</span>
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="华语" name="second" style="height: 358px;">
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===chinaSingerPage" v-for="(item,index) in chinaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===chinaSingerPage+1" v-for="(item,index) in chinaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===chinaSingerPage+2" v-for="(item,index) in chinaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===chinaSingerPage+3" v-for="(item,index) in chinaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===chinaSingerPage+4" v-for="(item,index) in chinaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-pagination small layout="prev, slot, next"
                                 class="pageClass"
                                 :total="chinaSinger.length"
                                 :page-size="5"
                                 style="text-align: center"
                                 @next-click="chargeSingerPage(2,1)"
                                 @prev-click="chargeSingerPage(2,2)">
                    <span
                      style="color: #1fc0ff">{{chinaSingerPageNum}}</span><span>/</span><span>{{Math.ceil(chinaSinger.length/5)}}</span>
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="欧美" name="third" style="height: 358px;">
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" :style="{backgroundImage:'url('+item.imgUrl+')'}" v-if="index===eaSingerPage"
                       v-for="(item,index) in eaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===eaSingerPage+1" v-for="(item,index) in eaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===eaSingerPage+2" v-for="(item,index) in eaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===eaSingerPage+3" v-for="(item,index) in eaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===eaSingerPage+4" v-for="(item,index) in eaSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-pagination small layout="prev, slot, next"
                                 class="pageClass"
                                 :total="eaSinger.length"
                                 :page-size="5"
                                 style="text-align: center"
                                 @next-click="chargeSingerPage(3,1)"
                                 @prev-click="chargeSingerPage(3,2)">
                    <span
                      style="color: #1fc0ff">{{eaSingerPageNum}}</span><span>/</span><span>{{Math.ceil(eaSinger.length/5)}}</span>
                  </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="日韩" name="fourth" style="height: 358px;">
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" :style="{backgroundImage:'url('+item.imgUrl+')'}" v-if="index===jkSingerPage"
                       v-for="(item,index) in jkSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgBig" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===jkSingerPage+1" v-for="(item,index) in jkSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===jkSingerPage+2" v-for="(item,index) in jkSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===jkSingerPage+3" v-for="(item,index) in jkSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-link :underline="false" v-show="true">
                  <div class="singImgSmall" style="margin-left: 10px;" :style="{backgroundImage:'url('+item.imgUrl+')'}"
                       v-if="index===jkSingerPage+4" v-for="(item,index) in jkSinger" :key="index" :title="item.singerName" @click="toSingerDetail(item)"></div>
                  </el-link>
                  <el-pagination small layout="prev, slot, next"
                                 class="pageClass"
                                 :total="jkSinger.length"
                                 :page-size="5"
                                 style="text-align: center"
                                 @next-click="chargeSingerPage(4,1)"
                                 @prev-click="chargeSingerPage(4,2)">
                    <span
                      style="color: #1fc0ff">{{jkSingerPageNum}}</span><span>/</span><span>{{Math.ceil(jkSinger.length/5)}}</span>
                  </el-pagination>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: 'index',
    data () {
      return {
        msg: '我是主页',
        imgList: [],
        musicList: [],
        musicImgUrlList: [],
        hotMusicList: [],
        hotRankingCount: 1,
        musicTime: [],
        chinaNewMusic: [],
        eaNewMusic: [],
        jkNewMusic: [],
        activeName: 'first',
        activeName1: 'first',
        chinaPage: 0,
        eaPage: 0,
        jkPage: 0,
        chinaPageNum: 1,
        eaPageNum: 1,
        jkPageNum: 1,
        chinaSortNum: 1,
        eaSortNum: 1,
        jkSortNum: 1,
        chinaMusicLoading: true,
        eaMusicLoading: true,
        jkMusicLoading: true,
        hotSinger: [],
        chinaSinger: [],
        eaSinger: [],
        jkSinger: [],
        hotSingerPageNum: 1,
        chinaSingerPageNum: 1,
        eaSingerPageNum: 1,
        jkSingerPageNum: 1,
        hotSingerPage: 0,
        chinaSingerPage: 0,
        eaSingerPage: 0,
        jkSingerPage: 0
      }
    },
    methods: {
      pushPage(index){

      },
      test(){
        console.log(this.chinaSinger)
      },
      //跳转歌单
      toMusicSheetDetail(id){
        this.$router.push({
          path: '/musicSheetDetail',
          query: {
            id:id
          }
        });
      },
      //歌手详情
      toSingerDetail(item){
        this.$router.push({
          path: '/singerDetail',
          query: {
            id:item.id
          }
        });
      },
      //新歌跳转播放
      chinaMusicToPlayMusic(hash,albumId){
        let routeUrl=this.$router.resolve({
          path: '/playMusic',
          query: {
            hash:hash,
            albumId:albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.chinaNewMusic
          }
        }).then(res => {
          window.open(routeUrl.href, '_blank');
        });
      },
      //新歌跳转播放
      eaMusicToPlayMusic(hash,albumId){
        let routeUrl=this.$router.resolve({
          path: '/playMusic',
          query: {
            hash:hash,
            albumId:albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.eaNewMusic
          }
        }).then(res => {
          window.open(routeUrl.href, '_blank');
        });
      },
      jkMusicToPlayMusic(hash,albumId){
        let routeUrl=this.$router.resolve({
          path: '/playMusic',
          query: {
            hash:hash,
            albumId:albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.jkNewMusic
          }
        }).then(res => {
          window.open(routeUrl.href, '_blank');
        });
      },
      //播放音乐
      hotMusicToPlayMusic(hash,albumId){
        let routeUrl=this.$router.resolve({
          path: '/playMusic',
          query: {
            hash:hash,
            albumId:albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.hotMusicList
          }
        }).then(res => {
          window.open(routeUrl.href, '_blank');
        });
      },
      getWalkingImg () {
        this.$axios({
          method: 'get',
          url: '/walking/getHeaderImg/1'
        }).then(res => {
          this.imgList = res.data.data.imgList;
        })
      },
      getKugouMusicList () {
        this.$axios({
          method: 'get',
          url: '/kugou/getMusicList'
        }).then(res => {
          console.log(res.data.data);
          //歌单列表List
          console.log("歌单图片"+res.data.data.info);
          this.musicList = res.data.data.info;
          for (let i = 0; i < 5; i++) {
            let imgUrl = this.musicList[i].imgUrl;
            let arr = imgUrl.split('/');
            this.musicImgUrlList[i] = arr[0] + '/' + arr[1] + '/' + arr[2] + '/' + arr[3] + '/' + arr[5] + '/' + arr[6];
            console.log(this.musicImgUrlList[i]);
          }
        })
      },
      getKugouHotMusicList () {
        this.$axios({
          method: 'get',
          url: '/kugou/getHotMusic'
        }).then(res => {
          console.log(res.data.data.info);
          this.hotMusicList = res.data.data.info;
        })
      },
      getMusicTime (album_id, hash) {
        this.$axios({
          method: 'get',
          url: '/kugou/play/' + album_id + '/' + hash,
          dataType: 'json',
        }).then(res => {
          let musicLength = (res.data.data.info.timeLength) / 1000;
          let min = Math.floor(musicLength / 60);
          let second = Math.floor(musicLength - (min * 60));
          if (second < 10) {
            second = '0' + second
          }
          let musicTime = min + ':' + second;
          this.musicTime.push(musicTime);
          console.log('音乐时间：' + musicTime)
        })
      },
      getNewMusic (musicType) {
        this.$axios({
          method: 'get',
          url: '/kugou/newMusic/' + musicType,
          dataType: 'json',
        }).then(res => {
          if (musicType === 1) {
            this.chinaNewMusic = res.data.data.info;
            this.chinaMusicLoading = false;
            console.log(res.data.data.info);
          }
          if (musicType === 2) {
            this.eaNewMusic = res.data.data.info;
            this.eaMusicLoading = false;
            console.log(res.data.data.info);
          }
          if (musicType === 3) {
            this.jkNewMusic = res.data.data.info;
            this.jkMusicLoading = false;
            console.log(res.data.data.info);
          }

        })
      },
      getSinger (singerType) {
        this.$axios({
          method: 'get',
          url: '/kugou/singer/' + singerType,
          dataType: 'json',
        }).then(res => {
          if (singerType === 1) {
            this.hotSinger = res.data.data.info;
          } else if (singerType === 2) {
            this.chinaSinger = res.data.data.info;
          } else if (singerType === 3) {
            this.eaSinger = res.data.data.info;
          } else if (singerType === 4) {
            this.jkSinger = res.data.data.info;
          }
        })
      },
      getAllNewMusicAndSinger () {
        this.getNewMusic(1);
        this.getNewMusic(2);
        this.getNewMusic(3);
        this.getSinger(1);
        this.getSinger(2);
        this.getSinger(3);
        this.getSinger(4);
      },
      chargePage (type, method) {
        if (type === 1) {
          if (method === 1) {
            this.chinaPage = this.chinaPage + 10;
            this.chinaPageNum++;
          } else {
            this.chinaPage = this.chinaPage - 10;
            this.chinaPageNum--;
          }
        }
        if (type === 2) {
          if (method === 1) {
            this.eaPage = this.eaPage + 10;
            this.eaPageNum++;
          } else {
            this.eaPage = this.eaPage - 10;
            this.eaPageNum--;
          }
        }
        if (type === 3) {
          if (method === 1) {
            this.jkPage = this.jkPage + 10;
            this.jkPageNum++;
          } else {
            this.jkPage = this.jkPage - 10;
            this.jkPageNum--;
          }
        }
      },
      chargeSingerPage (type, method) {
        if (type === 1) {
          if (method === 1) {
            this.hotSingerPage = this.hotSingerPage + 5;
            this.hotSingerPageNum++;
          } else {
            this.hotSingerPage = this.hotSingerPage - 5;
            this.hotSingerPageNum--;
          }
        }
        if (type === 2) {
          if (method === 1) {
            this.chinaSingerPage = this.chinaSingerPage + 5;
            this.chinaSingerPageNum++;
          } else {
            this.chinaSingerPage = this.chinaSingerPage - 5;
            this.chinaSingerPageNum--;
          }
        }
        if (type === 3) {
          if (method === 1) {
            this.eaSingerPage = this.eaSingerPage + 5;
            this.eaSingerPageNum++;
          } else {
            this.eaSingerPage = this.eaSingerPage - 5;
            this.eaSingerPageNum--;
          }
        }
        if (type === 4) {
          if (method === 1) {
            this.jkSingerPage = this.jkSingerPage + 5;
            this.jkSingerPageNum++;
          } else {
            this.jkSingerPage = this.jkSingerPage - 5;
            this.jkSingerPageNum--;
          }
        }
      }

    },
    mounted () {
      this.getWalkingImg();
      this.getKugouMusicList();
      this.getKugouHotMusicList();
      this.getAllNewMusicAndSinger();
    },
    created() {
      document.title = '酷猫主页'
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }

  .musicBodyTitle {
    font-family: "微软雅黑 Light";
    font-size: 30px;
    color: #99a9bf;
  }

  .musicBodyTitle2 {
    color: #1fc0ff;
  }

  .moreText {
    text-decoration: none;
    color: #999;
    float: right;
    margin-top: 9px;
  }

  .box {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .smallBox {
    width: 160px;
    height: 160px;
    background-color: #409EFF;
    margin-bottom: 5px;
    position: relative;
  }

  .boxTip {

    top: 0;
    right: 0;
    padding-right: 8px;
    height: 30px;
    _height: 20px;
    line-height: 30px;
    /*background: url(../images/cptTBg.png) no-repeat right center;*/
    color: #ffffff;
    text-align: right;

  }

  .el-icon-headset {
    margin-right: 5px;
  }

  .boxTitle {
    padding: 6px 8px;
    background: rgba(0, 0, 0, .5);
    font-size: 14px;
    color: #ffffff;
    position: absolute;
    bottom: 0;
    width: 309px;
  }

  .boxTitleSmall {
    padding: 6px 8px;
    background: rgba(0, 0, 0, .5);
    font-size: 14px;
    color: #ffffff;
    position: absolute;
    bottom: 0;
    width: 144px;
  }

  .box-1 {
    width: 325px;
    height: 325px;
    /*background-color: #99a9bf;*/
  }

  .musicLi {
    height: 30px;
    line-height: 30px;
    list-style: none;
    font-size: 14px;
  }

  .singImgBig {
    margin-top: 20px;
    width: 155px;
    height: 155px;
    display: inline-block;
    background-size: 155px 155px;
  }

  .singImgSmall {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 10px;
    background-size: 100px 100px;
  }
  .pageClass {
    margin-top: 40px;
  }
  /deep/ .el-link{
    vertical-align: top;
  }
</style>
